<template>
  <div>
    <div style="margin: 10px 0">
      <el-carousel :interval="4000" type="card" height="500px" style="background-color: rgba(227,227,227,0.75);border-radius: 10px">
        <el-carousel-item v-for="item in images" :key="item">
          <el-image :src="item" style="border-radius: 10px" ></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  name: "FrontHome",
  data() {
    return {
      images: [
          'http://localhost:9090/file/61b0ab763f754bc28ec61f336d3640a8.jpg',
          'http://localhost:9090/file/75212a2f09e1442ab8ee8e318d02c76e.jpg',
          'http://localhost:9090/file/2258276603644464b56758bdaa6d476a.jpg'
      ],
      files: []
    }
  },
  created() {
    this.request.get("/file/front/all").then(res => {
      console.log(res.data)
      this.images = res.data.filter(v => v.type === 'png' || v.type === 'jpg' || v.type === 'webp')
    })
  },
  methods: {

  }
}
</script>

<style>

</style>
